<template>
<div class="plain-bd">
  <div class="long-list">
    <div class="long-item"  :key="index1" v-for="(item1,index1) of bd.long_list">
      <img :src="item1" alt="">
    </div>
  </div>
  <div class="brick-list-box">
    <div class="brick-list" :id="'brickList'+bd.id" :key="index2" v-for="(item2,index2) of bd.brick_list">
      <div class="brick-list-item" :key="index3" v-for="(item3,index3) of bd.brick_list[index2].brick_list_item">
        <div class="cover">
          <img
              :src="item3.coverUrl"
              alt="">
        </div>
        <span class="title">{{item3.title}}</span>
        <span class="desc">{{item3.desc}}</span>
        <span class="price">
          {{item3.price}}元
          <del>{{item3.before}}</del>
        </span>
      </div>
      <div class="more-hot">
        <div class="text">
          <span>浏览更多</span>
          <span>热门</span>
        </div>
        <i class="iconfont icon-jinru"></i>
      </div>
    </div>

  </div>
</div>
</template>

<script>
import $ from 'jquery';
import PubSub from  'pubsub-js';
export default {
  name: "HomeMainPlainBD",
  props:{
    bd:Object
  },
  mounted() {
    const brickList=$(`.brick-list-box>#brickList${this.bd.id}`)
    brickList.hide()
    brickList.eq(0).show()
    console.log(this.id)
    PubSub.subscribe(`tabIndex${this.bd.id}`,(msg,data)=>{
      brickList.eq(data).show().siblings().hide()
      console.log(data)
    })
  }
}
</script>

<style lang="scss" scoped>
.plain-bd{
  height: 628px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .long-list{
    display: flex;
    flex-direction: column;
    width: 234px;
    flex-shrink: 0;
    height: 100%;
    .long-item{
      width: 100%;
      height: 300px;
      margin-bottom: 14px;
      transition: all 0.5s;
      &:hover {
        box-shadow: 0 5px 30px 0 #bdbdbd;
        transform: translateY(-5px);
        transition: all 0.5s;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .brick-list-box{
    width: 100%;
    position: relative;
    .brick-list{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .brick-list-item {
        width: 234px;
        height: 300px;
        transition: all 0.5s;
        background-color: #FFFFFF;
        margin: 0 0 14px 14px;
        display: flex;
        flex-direction: column;
        padding: 20px;
        align-items: center;
        &:nth-child(8){
          height: 143px;
          flex-direction: row-reverse;
          position: relative;
          .cover {
            width: 80px;
            height: 80px;
            margin-bottom: 18px;
            flex-shrink: 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .desc {
            display: none;
          }
          .title{
            position: absolute;
            top: 40px;
            white-space: normal;
            width: 94px;
            text-align: left;
            left: 30px;
          }
          .price{
            position: absolute;
            top: 90px;
            white-space: normal;
            width: 94px;
            text-align: left;
            left: 30px;
          }
        }

        &:hover {
          box-shadow: 0 5px 30px 0 #bdbdbd;
          transform: translateY(-5px);
          transition: all 0.5s;
        }

        .cover {
          width: 160px;
          height: 160px;
          margin-bottom: 18px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        span {
          width: 100%;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &.title {
            font-size: 14px;
            color: #333333;
            margin-bottom: 2px;
          }

          &.desc {
            margin-bottom: 10px;
            font-size: 12px;
            color: #b0b0b0;
          }
          &.price{
            font-size: 14px;
            color: #FF6700;
            del{
              color: #b0b0b0;
              margin-left: 5px;
            }
          }
        }
      }
      .more-hot{
        width: 234px;
        background: white;
        height: 143px;
        position: absolute;
        bottom: 14px;
        right: 0;
        transition: all 0.5s;
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .text{
          display: flex;
          flex-direction: column;
          span{
            &:first-child{
              font-size: 18px;
              color: #333;
            }
            &:last-child{
              font-size: 12px;
              color: #757575;
            }
          }

        }
        i{
          font-size: 42px;
          color: #FF6700;
        }
        &:hover {
          box-shadow: 0 5px 30px 0 #bdbdbd;
          transform: translateY(-5px);
          transition: all 0.5s;
        }

      }
    }

  }
}
</style>